<template>
	<view class="box">

		<!-- 授权登录成功 -->
		<view>
			<view class="admin-management">
				<view class="top">
					<view class="search">
						<u-search shape="square" :inputStyle="{'font-size':'24rpx'}" :showAction="false"
							placeholder="请输入要查询的任务的关键字" placeholderColor="rgba(153, 153, 153, 1)" :searchIconSize="26"
							bgColor="rgba(245, 245, 245, 1)" v-model="keyword" @input="myinput" color="#000000">
						</u-search>
					</view>
					<view class="message" @click.native="messageDetail">
						<u-icon name="chat" :size="35"></u-icon>
						<view class="badge">
							<u-badge bgColor="red" max="99" :value="msgList.length" shape="circle"></u-badge>
						</view>
					</view>
					<view class="setting" @click="this.setBoxShow = true">
						<image src="../../static/images/admin-info.png"></image>
					</view>
					<view class="setBox" v-if="setBoxShow">
						<view class="adminInfo" @click="gotoAdminInfo">
							个人信息
						</view>
						<view class="logout" @click="logout">
							退出登录
						</view>
					</view>
				</view>
			</view>

			<view class="task">
				<view class="task-top">

				</view>
				<u-tabs :activeStyle="{
                  color: '#2979ff'}" lineColor="rgba(67, 131, 238, 1)" lineWidth="12" :list="list1" @click="myclick">
				</u-tabs>
				<view class="taskList">
					<view class="headline">
						<view class="no">
							编号
						</view>
						<view class="title">
							标题
						</view>
						<view class="op">
							操作
						</view>
					</view>
					<view class="task-comcent">
						<view class="task-item" v-for="(item,index) in taskList" :key="item.id">
							<view class="item-no">
								{{index+1}}
							</view>
							<view class="item-title">
								{{stateFormat(item.title)}}
							</view>
							<view class="item-op">
								<view class="operation" @click.native="toTaskDetail(item.id)">
									查看
								</view>
								<view class="operation" @click.native="editTask(item.id)">
									编辑
								</view>
								<view class="operation" @click.native="getTaskId(item.id)">
									删除
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="addTask" @click="addTask">
				<image src="../../static/images/add-task.png" mode=""></image>
			</view>

		</view>
		<u-popup :show="deletePrompt" @close="close" @open="open">
			<view class="prompt">
				<view class="txt">
					你确定要删除改任务？
				</view>

				<view class="btn">
					<view class="cancel" @click="this.deletePrompt = false">
						取消
					</view>
					<view class="submit" @click="deleteTask">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getMsgList()
			this.getTaskList()
			// console.log("调用")
		},
		data() {
			return {

				// 任务id
				id: 0,
				deletePrompt: false,
				form: {
					username: '',
					password: '',
				},
				list1: [{
					name: '全部',
				}, {
					name: '进行中',
				}, {
					name: '已结束'
				}],
				// 延时器的 timerId
				timer: null,
				//查询任务关键字
				keyword: '',
				msgList: [],
				taskList: [],
				//seting 盒子的显示控制
				setBoxShow: false
			}

		},

		methods: {
			//跳转到adminInfo
			gotoAdminInfo() {
				this.setBoxShow = false
				uni.navigateTo({
					url: "/pages/adminInfo/adminInfo"
				})
			},

			//退出登录
			logout() {
				uni.removeStorageSync("admin")
				this.setBoxShow = false
				uni.navigateTo({
					url: "/pages/index/index"
				})
			},

			getTaskId(id) {
				this.id = id
				this.deletePrompt = true
			},


			//编辑任务
			editTask(id) {
				uni.navigateTo({
					//编辑任务
					url: '/package_admin/addTask/addTask?id=' + id
				})
			},


			// 查看任务详情
			async toTaskDetail(id) {

				uni.navigateTo({
					url: '/pages/taskDetail/taskDetail?id=' + id
				})
			},
			//导航栏点击
			myclick(item) {
				console.log(item);
				switch (item.index) {
					case 0: {
						// console.log(item.index)
						this.getTaskList(this.keyword, item.index)
						break
					}
					case 1: {
						// console.log(item.index)
						this.getTaskList(this.keyword, item.index)
						break
					}
					case 2: {
						// console.log(item.index)
						this.getTaskList(this.keyword, item.index)
						break
					}
				}
			},
			async myinput(e) {
				// console.log(e)
				// 清除 timer 对应的延时器
				clearTimeout(this.timer)
				// 重新启动一个延时器，并把 timerId 赋值给 this.timer
				this.timer = setTimeout(() => {
					// 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值
					this.keyword = e
					// 这里可以模糊查询根据名称
					this.getTaskList(this.keyword)
					// this.$request({

					// }).then(res=>{
					//   this.$request({
					//      url:`${this.$baseUrl}/task/search`,
					//      method:'GET'
					//   })
					// })
				}, 500)
			},
			stateFormat(text) {
				if (!text) return ''
				if (text.length < 4) return text + ""
				text = text.substring(0, 4) + "..."
				// console.log(text)
				return text;
			},
			async messageDetail() {
				uni.navigateTo({
					url: '/pages/msgList/msgList?item=' + encodeURIComponent(JSON.stringify(this.msgList)),
				})
			},
			//删除任务
			async deleteTask() {
				this.$request({
					url: `${this.$baseUrl}/task/delete/${this.id}`,
					method: 'DELETE',
				}).then(res => {
					this.deletePrompt = false
					this.getMsgList()
					this.getTaskList()
					// console.log(res.data)
					uni.showToast({
						title: "删除成功",
						icon: 'none'
					})
				})
				this.getTaskList()
			},
			//获取消息列表
			getMsgList() {
				uni.request({
					url: `${this.$baseUrl}/message/emeMsg`,
					method: 'GET',
					success: (res) => {
						this.msgList = res.data.data
					}
				})
			},
			getTaskList(search, status) {

				console.log(search)
				console.log(status)
				this.$request({
					url: `${this.$baseUrl}/task/getAll?search=` + search + "&status=" + status,
					method: 'GET',
				}).then(res => {
					this.taskList = res.data.data
					this.getAuthName();
				}).catch(res => {
					console.log(res)
				})

			},
			//添加任务
			addTask() {
				uni.navigateTo({
					url: "/package_admin/addTask/addTask"
				})
			}
		},
		watch: {
			keyword(newName, oldName) {
				if (newName === '') {
					// console.log("为空了")
					// this.getTaskList(this.keyword)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.box {

		box-sizing: border-box;

		.admin-management {
			margin-top: 24rpx;

			.top {
				position: relative;
				padding: 10rpx;
				display: flex;
				justify-content: flex-end;

				.search {
					overflow: hidden;
					width: 526rpx;
					height: 72rpx;
					border-radius: 20rpx;
					margin-left: 32rpx;
				}

				.setBox {
					z-index: 10;
					color: #55aaff;
					width: 150rpx;
					background-color: #ffffff;
					border-radius: 5rpx;
					border: 1px solid #b1b1b1;
					position: absolute;
					top: 90rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 20rpx;

					.logout {
						margin-top: 10rpx;
					}
				}

				.message {
					display: flex;
					margin-left: 24rpx;

					.badge {
						width: 50rpx;
						height: 50rpx;
					}
				}

				.setting {
					width: 56rpx;
					height: 56rpx;
					transform: translate(-20rpx, 5rpx);

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.task {
			.task-top {
				display: flex;

			}

			.taskList {
				margin-top: 36rpx;
				margin-left: 16rpx;

				.headline {
					font-size: 28rpx;
					color: rgba(51, 51, 51, 1);
					font-weight: 600;
					display: flex;

					line-height: 56rpx;

					.no {

						width: 92rpx;
						height: 56rpx;
						background: rgba(246, 246, 246, 1);
						padding-left: 16rpx;

					}

					.title {
						background: rgba(238, 239, 240, 1);
						border-radius: 4rpx;
						width: 246rpx;
						height: 56rpx;
						padding-left: 16rpx;
						background: rgba(233, 234, 235, 1);
					}

					.op {
						margin-left: 2rpx;
						width: 320rpx;
						height: 56rpx;
						border-radius: 4rpx;
						padding-left: 16rpx;
						background: rgba(233, 234, 235, 1);
					}
				}

				.task-comcent {
					.task-item {
						margin-top: 24rpx;
						display: flex;

						.item-no {
							padding-left: 16rpx;
							width: 92rpx;
							height: 56rpx;
							color: rgba(102, 102, 102, 1);
						}

						.item-title {
							padding-left: 16rpx;
							width: 246rpx;
							height: 56rpx;
							color: rgba(102, 102, 102, 1);
							font-weight: 400;
						}

						.item-op {
							display: flex;
							width: 320rpx;
							justify-content: space-between;

							.operation {
								font-size: 12px;
								font-weight: 400;
								width: 100rpx;
								height: 48rpx;
								border-radius: 8rpx;
								text-align: center;
								line-height: 48rpx;
								color: rgba(255, 255, 255, 1);
							}

							.operation:nth-child(1) {
								background: rgba(106, 121, 252, 1);
							}

							.operation:nth-child(2) {
								background: rgba(90, 221, 158, 1);
							}

							.operation:nth-child(3) {
								background: rgba(230, 52, 52, 1);
							}

						}
					}
				}

			}
		}

		.addTask {
			float: right;
			margin-top: 50rpx;
			margin-right: 32rpx;
			width: 112rpx;
			height: 112rpx;
			border-radius: 100%;
			background: rgba(41, 121, 255, 0.8);

			box-shadow: 0px 2rpx 10rpx 0px;

			image {
				margin: 28rpx;
				width: 56rpx;
				height: 56rpx;
			}
		}

		.prompt {
			height: 300rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.txt {
				margin-top: 60rpx;
				font-size: 40rpx;
			}

			.btn {
				margin-top: 20rpx;
				width: 60%;
				display: flex;
				justify-content: space-around;

				.submit {
					margin-top: 15rpx;
					padding: 10rpx;
					border-radius: 10rpx;
					border: 1px solid #c78500;
					width: 100rpx;
					text-align: center;
				}

				.cancel {
					margin-top: 15rpx;
					padding: 10rpx;
					border-radius: 10rpx;
					border: 1px solid #c78500;
					width: 100rpx;
					text-align: center;
				}
			}
		}

	}
</style>
